.city__weather {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
}

/**********************/
/* weather head style */
/**********************/
.city__weather-head {
    position: absolute;
    /*width: 1280px;*/
    margin-left: -10px;
    width: 1300px;
    height: 133px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.city__weather-head .separator {
    width: 1280px;
    left: 10px;
    margin-left: 0;
    bottom: 0;
}

.city__weather-head a {
    width: 130px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #9a9b9e;
    font-size: 26px;
    border-radius: 10px;
    border: 4px solid transparent;
    letter-spacing: 2px;
}

.city__weather-head a.hold {
    color: #46a7e7;
}

.city__weather-head a #wn-line {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -55px;
    bottom: -4px;
    width: 110px;
    height: 4px;
    background: #46a7e7;
}

.city__weather-head a:focus {
    color: #469ed7;
    border: solid 4px #46a7e7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

.city__weather-head #wp-link {
    left: 92px;
    top: 52px;
}

.city__weather-head #wn-link {
    left: 288px;
    top: 52px;
}

.city__weather-head .area,
.city__weather-head .update-time {
    position: absolute;
    top: 60px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: #9a9b9e;
    letter-spacing: 1px;
}

.city__weather-head .area {
    text-indent: 2em;
    right: 265px;
    width: 120px;
    background: url(img/weather/area.png) center no-repeat;
}

.city__weather-head .update-time {
    text-align: center;
    right: 65px;
    width: 190px;
    font-family: din_regularalternate, sans-serif;
}

/****************************/
/* weather prediction style */
/****************************/
.city__weather-prediction {
    position: absolute;
    top: 133px;
    width: 1280px;
    height: 587px;
}

.city__weather-prediction .separator {
    margin-left: -554px;
    width: 1108px;
}

.city__weather-prediction #canvas-top {
    top: 105px;
}

.city__weather-prediction #canvas-bottom {
    bottom: 61px;
}

.city__wp-tl {
    position: absolute;
    left: 50%;
    margin-left: -554px;
    top: 15px;
    width: 1108px;
    height: 90px;
}

.city__wp-tl-item {
    position: relative;
    width: 158px;
    height: 100%;
    float: left;
}

.city__weather-prediction .mask {
    position: absolute;
    left: 86px;
    top: 105px;
    width: 158px;
    height: 420px;
    /*background: rgba(255, 255, 255, .1);*/
    background: #fff;
    opacity: .1;
}

.city__wp-tl-item .week {
    position: absolute;
    top: 10px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    color: #f0f0f0;
}

.city__wp-tl-item .day {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #9a9b9e;
    font-family: din_regularalternate, sans-serif;
    letter-spacing: 1px;
}

#weather_draw {
    position: absolute;
    left: 50%;
    margin-left: -554px;
    top: 200px;
}

.city__wp-dl {
    position: absolute;
    left: 50%;
    margin-left: -554px;
    top: 105px;
    width: 1108px;
    height: 420px;
}

.city__wp-dl-item {
    position: relative;
    width: 158px;
    height: 100%;
    float: left;
}

.city__wp-dl-item .top {
    position: absolute;
    width: 100%;
    height: 100px;
}

.city__wp-dl-item span {
    display: inline-block;
    position: absolute;
    font-size: 20px;
    color: #9a9b9e;
    text-align: center;
}

.city__wp-dl-item .icon {
    width: 80px;
    left: 50%;
    margin-left: -40px;
    top: 10px;
    height: 60px;
}

.city__wp-dl-item .name {
    width: 100%;
    height: 25px;
    line-height: 25px;
    bottom: 0;
}

.city__wp-dl-item .bottom {
    position: absolute;
    width: 100%;
    height: 85px;
    bottom: 0;
}

.city__wp-dl-item .wind {
    top: 5px;
    width: 100%;
    height: 25px;
    line-height: 25px;
}

.city__wp-dl-item .level {
    width: 100%;
    bottom: 20px;
    height: 25px;
    line-height: 25px;
}

/*************************/
/* weather warning style */
/*************************/
.city__weather-warning {
    position: absolute;
    top: 133px;
    width: 330px;
    height: 587px;
}

.city__weather-warning .separator {
    position: absolute;
    left: 310px;
    margin-left: 0;
    bottom: 0;
    width: 1px;
    height: 570px;
    background: #fff;
    opacity: .1;
}

/* weather ww-head style */
.city__ww-tl {
    position: absolute;
    left: 105px;
    top: 17px;
    width: 205px;
    height: 570px;
}

.city__ww-tl-item {
    position: relative;
    margin-top: -4px;
    float: left;
    width: 205px;
    height: 120px;
}

.city__ww-tl-item > a {
    left: 0;
    top: 0;
    width: 195px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 24px;
    color: #9a9b9e;
    border: 4px solid transparent;
    border-radius: 10px;
}

.city__ww-tl-item > a.hold {
    background: rgba(255, 255, 255, .1);
}

.city__ww-tl-item > a:focus {
    color: #fff;
    border: 4px solid #46a7e7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

.city__ww-tl-item a > .separator {
    bottom: -3px;
    left: 50%;
    margin-left: -95px;
    width: 190px;
    height: 1px;
}

.city__ww-tl-item a:focus > .separator {
    opacity: 0;
}

/* weather ww-body style */
.city__weather-wb {
    position: absolute;
    left: 330px;
    width: 950px;
}

.city__ww-dl {
    position: absolute;
    width: 825px;
    height: 570px;
}

.city__ww-dl-item {
    position: relative;
    margin-top: -4px;
    float: left;
    width: 825px;
    height: 145px;
}

.city__ww-dl-item > a {
    position: absolute;
    bottom: -3px;
    width: 815px;
    height: 135px;
    border: 4px solid transparent;
    border-radius: 10px;
}

.city__ww-dl-item > a:focus {
    color: #fff;
    border: 4px solid #46a7e7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

.city__ww-dl-item > a:focus > .title,
.city__ww-dl-item > a:focus > .time {
    color: #fff !important;
}

.city__ww-dl-item .icon {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -40px;
    width: 100px;
    height: 80px;
    background-size: 100% !important;
    border-radius: 5px;
}

.city__ww-dl-item .title {
    position: absolute;
    left: 180px;
    top: 15px;
    width: 400px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-size: 26px;
    color: #f0f0f0;
}

.city__ww-dl-item .time {
    position: absolute;
    left: 180px;
    bottom: 20px;
    width: 400px;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 20px;
    color: #9a9b9e;
}

.city__ww-dl-item a > .separator {
    bottom: -3px;
    left: 50%;
    margin-left: -387px;
    width: 774px;
    height: 1px;
}

.city__ww-dl-item a:focus > .separator {
    opacity: 0;
}

/**********************/
/* weather mask style */
/**********************/
.city__weather-scroll {
    position: absolute;
    bottom: 30px;
    width: 1280px;
    height: 690px;
    overflow: hidden;
}

/* weather mask-head style */
.city__weather-mh {
    position: absolute;
    left: 50%;
    margin-left: -458px;
    width: 916px;
    height: 215px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.city__weather-mh .icon {
    position: absolute;
    left: 215px;
    top: 90px;
    width: 100px;
    height: 80px;
    background-size: 100% !important;
}

.city__weather-mh .title,
.city__weather-mh .update-time {
    position: absolute;
    left: 340px;
    width: 500px;
    height: 40px;
    line-height: 40px;
}

.city__weather-mh .title {
    top: 83px;
    font-size: 26px;
    color: #f0f0f0;
    letter-spacing: 4px;
}

.city__weather-mh .update-time {
    bottom: 36px;
    font-size: 20px;
    color: #9a9b9e;
    letter-spacing: 2px;
}

/* weather mask-body style */
.city__weather-mb {
    position: absolute;
    left: 50%;
    margin-left: -458px;
    top: 215px;
    width: 916px;
}

.city__weather-mb .detail,
.city__weather-mb .guide {
    margin-top: 35px;
    width: 100%;
    line-height: 45px;
    font-size: 24px;
    letter-spacing: 2px;
}

.city__weather-mb .detail {
    color: #f0f0f0;
}

.city__weather-mb .guide {
    color: #9a9d9e;
}

/*************************/
/* prediction icon style */
/*************************/
.city__sunny {
    background: url(img/weather/svg/sunny.svg) center no-repeat;
    background-size: 50%;
}

.city__cloudy {
    background: url(img/weather/svg/cloudy.svg) center no-repeat;
    background-size: 50%;
}

.city__overcast {
    background: url(img/weather/svg/overcast.svg) center no-repeat;
    background-size: 50%;
}

.city__light-rain {
    background: url(img/weather/svg/light_rain.svg) center no-repeat;
    background-size: 50%;
}

.city__middling-rain {
    background: url(img/weather/svg/middling_rain.svg) center no-repeat;
    background-size: 50%;
}

.city__heavy-rain {
    background: url(img/weather/svg/heavy_rain.svg) center no-repeat;
    background-size: 50%;
}

.city__thundershower {
    background: url(img/weather/svg/thundershower.svg) center no-repeat;
    background-size: 50%;
}

.city__rainstorm {
    background: url(img/weather/svg/rainstorm.svg) center no-repeat;
    background-size: 50%;
}

.city__extra-rainstorm {
    background: url(img/weather/svg/extra_rainstorm.svg) center no-repeat;
    background-size: 50%;
}

.city__light-snow {
    background: url(img/weather/svg/light_snow.svg) center no-repeat;
    background-size: 50%;
}

.city__middling-snow {
    background: url(img/weather/svg/middling_snow.svg) center no-repeat;
    background-size: 50%;
}

.city__heavy-snow {
    background: url(img/weather/svg/heavy_snow.svg) center no-repeat;
    background-size: 50%;
}

.city__heavy-snowstorm {
    background: url(img/weather/svg/heavy_snowstorm.svg) center no-repeat;
    background-size: 50%;
}

.city__rain-snow {
    background: url(img/weather/svg/rain_snow.svg) center no-repeat;
    background-size: 50%;
}

.city__wind {
    background: url(img/weather/svg/wind.svg) center no-repeat;
    background-size: 50%;
}

.city__high-wind {
    background: url(img/weather/svg/high_wind.svg) center no-repeat;
    background-size: 50%;
}

.city__tornado {
    background: url(img/weather/svg/tornado.svg) center no-repeat;
    background-size: 50%;
}

.city__hurricane {
    background: url(img/weather/svg/hurricane.svg) center no-repeat;
    background-size: 50%;
}

.city__fog {
    background: url(img/weather/svg/fog.svg) center no-repeat;
    background-size: 50%;
}

.city__haze {
    background: url(img/weather/svg/haze.svg) center no-repeat;
    background-size: 50%;
}

.city__floating-dust {
    background: url(img/weather/svg/floating_dust.svg) center no-repeat;
    background-size: 50%;
}

.city__sand-dust {
    background: url(img/weather/svg/sand_dust.svg) center no-repeat;
    background-size: 50%;
}

.city__hailstone {
    background: url(img/weather/svg/hailstone.svg) center no-repeat;
    background-size: 50%;
}

/**********************/
/* warning icon style */
/**********************/
.city__cold-orange {
    background: url(img/weather/jpg/cold_orange.jpg) center no-repeat;
}

.city__cold-red {
    background: url(img/weather/jpg/cold_red.jpg) center no-repeat;
}

.city__cold-yellow {
    background: url(img/weather/jpg/cold_yellow.jpg) center no-repeat;
}

.city__cold-blue {
    background: url(img/weather/jpg/cold__blue.jpg) center no-repeat;
}

.city__dry-orange {
    background: url(img/weather/jpg/dry_orange.jpg) center no-repeat;
}

.city__dry-red {
    background: url(img/weather/jpg/dry_red.jpg) center no-repeat;
}

.city__fire-orange {
    background: url(img/weather/jpg/fire_orange.jpg) center no-repeat;
}

.city__fire-red {
    background: url(img/weather/jpg/fire_red.jpg) center no-repeat;
}

.city__fire-yellow {
    background: url(img/weather/jpg/fire_yellow.jpg) center no-repeat;
}

.city__frost-orange {
    background: url(img/weather/jpg/frost_orange.jpg) center no-repeat;
}

.city__frost-yellow {
    background: url(img/weather/jpg/frost_yellow.jpg) center no-repeat;
}

.city__frost-blue {
    background: url(img/weather/jpg/frost_blue.jpg) center no-repeat;
}

.city__hailstone-orange {
    background: url(img/weather/jpg/hailstone_orange.jpg) center no-repeat;
}

.city__hailstone-red {
    background: url(img/weather/jpg/hailstone_red.jpg) center no-repeat;
}

.city__haze-orange {
    background: url(img/weather/jpg/haze_orange.jpg) center no-repeat;
}

.city__haze-red {
    background: url(img/weather/jpg/haze_red.jpg) center no-repeat;
}

.city__haze-yellow {
    background: url(img/weather/jpg/haze_yellow.jpg) center no-repeat;
}

.city__sd-orange {
    background: url(img/weather/jpg/sd_orange.jpg) center no-repeat;
}

.city__sd-red {
    background: url(img/weather/jpg/sd_red.jpg) center no-repeat;
}

.city__sd-yellow {
    background: url(img/weather/jpg/sd_yellow.jpg) center no-repeat;
}

.city__snow-orange {
    background: url(img/weather/jpg/snow_orange.jpg) center no-repeat;
}

.city__snow-red {
    background: url(img/weather/jpg/snow_red.jpg) center no-repeat;
}

.city__snow-yellow {
    background: url(img/weather/jpg/snow_yellow.jpg) center no-repeat;
}

.city__snow-blue {
    background: url(img/weather/jpg/snow_blue.jpg) center no-repeat;
}

.city__thunder-orange {
    background: url(img/weather/jpg/thunder_orange.jpg) center no-repeat;
}

.city__thunder-red {
    background: url(img/weather/jpg/thunder_red.jpg) center no-repeat;
}

.city__thunder-yellow {
    background: url(img/weather/jpg/thunder_yellow.jpg) center no-repeat;
}

.city__tornado-orange {
    background: url(img/weather/jpg/tornado_orange.jpg) center no-repeat;
}

.city__tornado-yellow {
    background: url(img/weather/jpg/tornado_yellow.jpg) center no-repeat;
}

.city__tornado-blue {
    background: url(img/weather/jpg/tornado_blue.jpg) center no-repeat;
}

.city__trw-orange {
    background: url(img/weather/jpg/trw_orange.jpg) center no-repeat;
}

.city__trw-red {
    background: url(img/weather/jpg/trw_red.jpg) center no-repeat;
}

.city__trw-yellow {
    background: url(img/weather/jpg/trw_yellow.jpg) center no-repeat;
}

.city__trw-blue {
    background: url(img/weather/jpg/trw_blue.jpg) center no-repeat;
}

.city__wind-orange {
    background: url(img/weather/jpg/wind_orange.jpg) center no-repeat;
}

.city__wind-red {
    background: url(img/weather/jpg/wind_red.jpg) center no-repeat;
}

.city__wind-yellow {
    background: url(img/weather/jpg/wind_yellow.jpg) center no-repeat;
}

.city__wind-blue {
    background: url(img/weather/jpg/wind_blue.jpg) center no-repeat;
}